/*
 * @Author: your name
 * @Date: 2021-04-27 15:11:50
 * @LastEditTime: 2021-06-11 17:44:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \umi\src\pages\renewalPanel\index.tsx
 */

import { Tabs, Select, Table, Space, Button, Modal, message, Input } from 'antd';
import React from 'react';
import { connect, history } from 'umi';
import type { ConnectState } from '@/models/connect';
import type {
  columnsEnum,
  IRenewalList,
  searchParam,
  operationSearchParam,
  proProductListCloumns,
  IcheckKey,
} from './data.d';
import type { ICommonResponse } from '@/interface/common.d';
import { ProductStatus, RenewalWays } from '@/pages/renewalDetail/data.d';
import { PromissoryKey } from './data.d';
import { SearchOutlined } from '@ant-design/icons';
import type { ConnectProps } from 'umi';
import ProductListTableForModal from '@/components/ProductListTableForModal';
import { Component } from 'react';
import moment from 'moment';
import classNames from 'classnames';
import styles from './index.less';

const { TabPane } = Tabs;

const PRODUCT_STATUS_MAP: Record<ProductStatus, string> = {
  [ProductStatus.All]: '全部',
  [ProductStatus.WAIT]: '待审',
  [ProductStatus.SALES]: '上架',
  [ProductStatus.UNSALES]: '下架',
  [ProductStatus.TEST]: '测试',
  [ProductStatus.STOP]: '停售',
};

const PROMISSION_KEY_MAP: Record<string, PromissoryKey> = {
  edite: PromissoryKey.PRODUCTEDITE,
  detail: PromissoryKey.PRODUCTDETAIL,
};

const RENEWAL_WAYS_MAP: Record<RenewalWays, string> = {
  [RenewalWays.NOWAY]: '不支持续保',
  [RenewalWays.COD]: '保司续保',
  [RenewalWays.HUIZE]: '慧择续保',
};

type RenewalPanelProps = {
  renewalList: columnsEnum[];
  pageIndex: number;
  total: number;
  productModalList: proProductListCloumns[];
  pageIndexModal: number;
  totalModal: number;
  renewalListRecycle: columnsEnum[];
  totalRecycle: number;
  pageIndexRecycle: number;
} & Partial<ConnectProps>;

type IState = {
  pageIndex: number;
  visibleProductModal: boolean;
  tabsShow: number | string;
  selectedR: columnsEnum[];
  productName: string;
  productNameR: string;
  productId: string | number;
  productIdR: string | number;
  productIdModal: string;
  productNameModal: string;
  productStatus: string | number;
  productStatusR: string | number;
  renewalWay: string | number;
  renewalWayR: string | number;
  searchParams: searchParam;
  searchParamsR: searchParam;
  searchOperation: operationSearchParam;
  promissionEdite: boolean;
  promissionDetail: boolean;
  selectModalList: (number | string)[];
  idListR: (number | string)[];
};

class RenewalPanel extends Component<RenewalPanelProps, IState> {
  constructor(props: RenewalPanelProps) {
    super(props);
    this.state = {
      pageIndex: 1,
      visibleProductModal: false,
      tabsShow: '1',
      selectedR: [],
      productName: '',
      productNameR: '',
      productId: '',
      productIdR: '',
      productStatus: '',
      productStatusR: '',
      renewalWay: '',
      renewalWayR: '',
      productIdModal: '',
      productNameModal: '',
      searchParams: {},
      searchParamsR: {},
      searchOperation: {},
      promissionEdite: false,
      promissionDetail: false,
      selectModalList: [],
      idListR: [],
    };
  }
  componentDidMount() {
    // eslint-disable-next-line no-console
    console.log('ComponentDidMount');
    // 网络请求
    this.get2TabData();
    this.getPermission();
  }
  get2TabData = () => {
    const { pageIndexRecycle, pageIndex, dispatch } = this.props;
    const { searchParams, searchParamsR } = this.state;
    if (dispatch) {
      // 商品列表
      dispatch({
        type: 'renewal/getRenewalList',
        payload: {
          ...searchParams,
          isRecycle: false,
          pageSize: 10,
          pageIndex,
        },
      });

      // 回收站
      dispatch({
        type: 'renewal/getRenewalIsRecycleList',
        payload: {
          ...searchParamsR,
          isRecycle: true,
          pageSize: 10,
          pageIndex: pageIndexRecycle,
        },
      });
    }
  };
  getPermission = () => {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'renewal/getPermission',
        payload: [PROMISSION_KEY_MAP.detail, PROMISSION_KEY_MAP.edite],
      }).then((jsons: ICommonResponse<IcheckKey>) => {
        if (jsons.success) {
          this.setState({
            promissionDetail: jsons.data[PROMISSION_KEY_MAP.detail],
            promissionEdite: jsons.data[PROMISSION_KEY_MAP.edite],
          });
        }
      });
    }
  };
  handleSeeDetail = (id: number | string) => {
    // eslint-disable-next-line no-restricted-globals
    history.push(`/product-management/renewal-detail/${id}`);
  };
  handleEditeDetail = (id: number | string) => {
    history.push(`/product-management/renewal-edite/${id}`);
  };
  closeModalProduct = () => {
    this.setState({
      visibleProductModal: false,
      searchOperation: {},
    });
  };
  handleAddBut = () => {
    const { dispatch } = this.props;
    const { searchOperation } = this.state;

    if (dispatch) {
      dispatch({
        type: 'renewal/getRenewalProductForModal',
        payload: {
          ...searchOperation,
          pageSize: 7,
          pageIndex: 1,
        },
        // eslint-disable-next-line no-console
      }).then((jsons: ICommonResponse<proProductListCloumns>) => {
        // eslint-disable-next-line no-console
        console.log('........', jsons);
        if (jsons.success) {
          this.setState({
            visibleProductModal: true,
          });
        }
      });
    }
  };
  changeSelectionModal = (selectedRows: proProductListCloumns[]) => {
    this.setState({
      selectModalList: selectedRows.map((t) => t.productId),
    });
  };

  addSomeProduct = () => {
    const { dispatch, productModalList } = this.props;
    const { selectModalList } = this.state;
    if (selectModalList.length < 1) {
      return;
    }
    if (dispatch) {
      const isExisIds = productModalList.map(
        (m: { productId: number | string; isExists: boolean }) => {
          if (m.isExists) {
            return m.productId;
          }
          return '';
        },
      );
      dispatch({
        type: 'renewal/importProduct',
        payload: {
          productIdList: selectModalList.filter((d) => {
            return !isExisIds.includes(d);
          }),
        },
        // eslint-disable-next-line no-console
      }).then((jsons: ICommonResponse<null>) => {
        if (jsons.success) {
          this.get2TabData();
          this.setState({
            selectModalList: [],
          });
          message.success('该商品已添加成功');
          // 前端暂时改变添加状态
          const newProModalList = productModalList.map(
            (u: { productId: number | string; isExists: boolean }) => {
              if (selectModalList.includes(u.productId)) {
                return { ...u, isExists: true };
              }
              return u;
            },
          );

          dispatch({
            type: 'renewal/updateAddStatus',
            payload: newProModalList,
          });
        }
      });
    }
  };
  handleProduct = (productItem: proProductListCloumns) => {
    // eslint-disable-next-line no-console
    console.log('产品', productItem);
    const { productModalList } = this.props;
    // ajax code
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'renewal/importProduct',
        payload: {
          productIdList: [productItem.productId],
        },
        // eslint-disable-next-line no-console
      }).then((jsons: ICommonResponse<null>) => {
        if (jsons.success) {
          this.get2TabData();
          message.success('该商品已添加成功');
          // 前端暂时改变添加状态

          const newProModalList = productModalList.map(
            (u: { productId: number | string; isExists: boolean }) => {
              if (u.productId === productItem.productId) {
                return { ...u, isExists: true };
              }
              return u;
            },
          );

          dispatch({
            type: 'renewal/updateAddStatus',
            payload: newProModalList,
          });
        }
      });
    }
  };
  // modal产品列表翻页
  onPageChange = (pageNum: number) => {
    const { dispatch } = this.props;
    const { searchOperation, selectModalList } = this.state;
    if (selectModalList.length) {
      message.warning('添加商品不支持跨页添加');
      return;
    }
    if (dispatch) {
      dispatch({
        type: 'renewal/getRenewalProductForModal',
        payload: {
          ...searchOperation,
          pageSize: 7,
          pageIndex: pageNum,
        },
      });
    }
  };

  // tab配置管理列表翻页
  browsePage = (page: number, pageSize?: number) => {
    const { dispatch } = this.props;
    const { searchParams, idListR } = this.state;
    if (idListR.length) {
      message.warning('移入回收站不支持跨页操作');
      return;
    }
    if (dispatch) {
      dispatch({
        type: 'renewal/getRenewalList',
        payload: {
          ...searchParams,
          isRecycle: false,
          pageSize,
          pageIndex: page,
        },
        // eslint-disable-next-line no-console
      }).then((jsons: ICommonResponse<IRenewalList>) => {
        // eslint-disable-next-line no-console
        console.log('........', jsons);
      });
    }
  };
  // tab 回收站列表翻页
  browsePageRecycle = (page: number, pageSize?: number) => {
    const { dispatch } = this.props;
    const { searchParamsR, selectedR } = this.state;
    if (selectedR.length) {
      message.warning('恢复配置不支持跨页操作');
      return;
    }
    if (dispatch) {
      dispatch({
        type: 'renewal/getRenewalIsRecycleList',
        payload: {
          ...searchParamsR,
          isRecycle: true,
          pageSize,
          pageIndex: page,
        },
        // eslint-disable-next-line no-console
      }).then((jsons: ICommonResponse<IRenewalList>) => {
        // eslint-disable-next-line no-console
        console.log('........', jsons, selectedR);
      });
    }
  };
  switchTabs = (index: string | number) => {
    this.setState({
      tabsShow: index,
    });
  };
  reserveProduct = () => {
    const { selectedR } = this.state;
    Modal.confirm({
      title: '恢复配置信息',
      content: `确定要对${selectedR.length}个商品进行恢复配置吗?`,
      mask: false,
      okText: '确定',
      onOk: this.reserveOk,
    });
  };
  reserveOk = () => {
    const { selectedR } = this.state;
    const { dispatch } = this.props;
    const params = selectedR.map((r) => r.id);
    return new Promise<void>((resolve, reject) => {
      if (dispatch) {
        dispatch({
          type: 'renewal/backUpRenewal',
          payload: {
            idList: params,
          },
          // eslint-disable-next-line no-console
        }).then((jsons: ICommonResponse<null>) => {
          if (jsons.success) {
            this.get2TabData();
            this.setState(
              {
                selectedR: [],
                idListR: [],
              },
              () => {
                resolve();
                message.success('已恢复配置');
              },
            );
          } else {
            reject();
          }
        });
      } else {
        reject();
      }
    });
  };
  handleSearch = () => {
    const { productName, productId, renewalWay, productStatus } = this.state;
    const { dispatch } = this.props;
    this.setState(
      {
        searchParams: {
          productId,
          productName,
          renewalWay,
          status: productStatus,
        },
      },
      () => {
        if (dispatch) {
          const { searchParams } = this.state;
          dispatch({
            type: 'renewal/getRenewalList',
            payload: {
              ...searchParams,
              isRecycle: false,
              pageSize: 10,
              pageIndex: 1,
            },
          });
        }
      },
    );
  };
  handleRecovery = () => {
    const { dispatch } = this.props;
    this.setState(
      {
        searchParams: {},
        productName: '',
        productId: '',
        renewalWay: '',
        productStatus: '',
      },
      () => {
        if (dispatch) {
          const { searchParams } = this.state;
          dispatch({
            type: 'renewal/getRenewalList',
            payload: {
              ...searchParams,
              isRecycle: false,
              pageSize: 10,
              pageIndex: 1,
            },
          });
        }
      },
    );
  };

  handleSearchR = () => {
    const { productNameR, productIdR, renewalWayR, productStatusR } = this.state;
    const { dispatch } = this.props;
    this.setState(
      {
        searchParamsR: {
          productId: productIdR,
          productName: productNameR,
          renewalWay: renewalWayR,
          status: productStatusR,
        },
      },
      () => {
        if (dispatch) {
          const { searchParamsR } = this.state;
          dispatch({
            type: 'renewal/getRenewalIsRecycleList',
            payload: {
              ...searchParamsR,
              isRecycle: true,
              pageSize: 10,
              pageIndex: 1,
            },
          });
        }
      },
    );
  };
  handleRecoveryR = () => {
    const { dispatch } = this.props;
    this.setState(
      {
        searchParamsR: {},
        productNameR: '',
        productIdR: '',
        renewalWayR: '',
        productStatusR: '',
      },
      () => {
        if (dispatch) {
          const { searchParamsR } = this.state;
          dispatch({
            type: 'renewal/getRenewalIsRecycleList',
            payload: {
              ...searchParamsR,
              isRecycle: true,
              pageSize: 10,
              pageIndex: 1,
            },
          });
        }
      },
    );
  };

  handleSearchInModal = () => {
    const { productIdModal, productNameModal } = this.state;
    const { dispatch } = this.props;
    this.setState(
      {
        searchOperation: {
          productId: productIdModal,
          productName: productNameModal,
        },
      },
      () => {
        if (dispatch) {
          const { searchOperation } = this.state;
          dispatch({
            type: 'renewal/getRenewalProductForModal',
            payload: {
              ...searchOperation,
              pageSize: 7,
              pageIndex: 1,
            },
            // eslint-disable-next-line no-console
          }).then((jsons: ICommonResponse<proProductListCloumns>) => {
            // eslint-disable-next-line no-console
            console.log('........', jsons);
            if (jsons.success) {
              this.setState({
                visibleProductModal: true,
              });
            }
          });
        }
      },
    );
  };

  // 移入回收站
  recycleBefore = (id: (number | string)[], num?: number) => {
    Modal.confirm({
      title: num ? `确认要移除这${num}条信息吗？` : '确认要移除这条信息吗？',
      content: `移入回收站后，该商品续保设置将不生效。您可以从回收站中再次恢复`,
      mask: false,
      okText: '确定',
      onOk: () => {
        this.recycleRenewal(id, num);
      },
    });
  };
  uniqueArray = (arr: columnsEnum[]) => {
    const res = new Map();
    return arr.filter((arrs) => !res.has(arrs.baseProductId) && res.set(arrs.baseProductId, 1));
  };
  recycleRenewal = (id: (number | string)[], isSelectHandle?: number) => {
    const { dispatch } = this.props;
    const { idListR } = this.state;
    return new Promise<void>((resolve, reject) => {
      if (dispatch) {
        dispatch({
          type: 'renewal/recycleRenewal',
          payload: {
            idList: isSelectHandle ? idListR : id,
          },
          // eslint-disable-next-line no-console
        }).then((jsons: ICommonResponse<null>) => {
          if (jsons.success) {
            this.get2TabData();
            // 若是单项数据移动，需要改变一下state
            this.setState({
              idListR: [],
              selectedR: [],
            });

            resolve();
            message.success('该商品已移入回收站');
          } else {
            reject();
          }
        });
      } else {
        reject();
      }
    });
  };

  render() {
    const {
      renewalList,
      pageIndex,
      total,
      productModalList,
      pageIndexModal,
      totalModal,
      renewalListRecycle,
      totalRecycle,
      pageIndexRecycle,
    } = this.props;
    const {
      visibleProductModal,
      selectedR,
      productStatus,
      productStatusR,
      productName,
      productNameR,
      productId,
      productIdR,
      productNameModal,
      productIdModal,
      promissionDetail,
      promissionEdite,
      selectModalList,
      idListR,
    } = this.state;
    // eslint-disable-next-line no-console
    console.log('列表数据', renewalList);
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: columnsEnum[]) => {
        // eslint-disable-next-line no-console
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedR: ', selectedRows);
        this.setState({
          selectedR: selectedRows,
        });
      },
      selectedRowKeys: selectedR.map((y) => y.id),
      // getCheckboxProps: (record: any) => ({
      //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
      //   name: record.name,
      //   props: {
      //     defaultChecked: selectedR.map((p) => p.baseProductId).includes(record.baseProductId),
      //   },
      // }),
    };

    const rowSelectionList = {
      onChange: (selectedRowKeys: any, selectedRows: columnsEnum[]) => {
        // eslint-disable-next-line no-console
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedR: ', selectedRows);
        const selectedRowsIds = selectedRows.map((h) => h.id);
        this.setState({
          // idListR: selectedRows.map((b) => b.id),
          idListR: selectedRowsIds,
        });
      },
      selectedRowKeys: idListR,
      // getCheckboxProps: (record: any) => ({
      //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
      //   name: record.name,
      //   props: {
      //     defaultChecked: idListR.includes(record.id),
      //   },
      // }),
    };
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'productName',
        key: 'productName',
      },
      {
        title: '运营层ID',
        dataIndex: 'operProductId',
        key: 'operProductId',
      },
      {
        title: '基础层ID',
        dataIndex: 'baseProductId',
        key: 'baseProductId',
      },
      {
        title: '上架状态',
        render: (record: columnsEnum) => {
          return (
            <div className={styles.saleStatusWarp}>
              <div className={classNames(styles.saleDot, styles[`saleDot${record.productStatus}`])}>
                {null}
              </div>
              <div>{PRODUCT_STATUS_MAP[record.productStatus]}</div>
            </div>
          );
        },
      },
      {
        title: '续保方式',
        key: 'renewalWay',
        render: (record: columnsEnum) => {
          return RENEWAL_WAYS_MAP[record.renewalWay];
        },
      },
      {
        title: '最早可续保时间',
        key: 'renewalStartDay',
        render: (record: columnsEnum) => {
          return record.renewalStartDay || record.renewalStartDay === 0
            ? record.renewalStartDay
            : '--';
        },
      },
      {
        title: '最迟可续保时间',
        key: 'renewalGracePeriod',
        render: (record: columnsEnum) => {
          return record.renewalGracePeriod || record.renewalGracePeriod === 0
            ? record.renewalGracePeriod
            : '--';
        },
      },
      {
        title: '操作人',
        dataIndex: 'updateUserName',
        key: 'updateUserName',
      },
      {
        title: '更新时间',
        key: 'updateTime',
        render: (record: columnsEnum) => {
          return moment(record.updateTime).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '操作',
        render: (record: columnsEnum) => {
          return (
            <Space>
              {promissionDetail && (
                <div
                  className={styles.toolLite}
                  onClick={() => {
                    // eslint-disable-next-line no-console
                    console.log('record', record);
                    this.handleSeeDetail(record.id);
                  }}
                >
                  查看
                </div>
              )}

              {promissionEdite && (
                <div
                  className={styles.toolLite}
                  onClick={() => {
                    this.handleEditeDetail(record.id);
                  }}
                >
                  编辑
                </div>
              )}
            </Space>
          );
        },
      },
    ];
    return (
      <div className={styles.renewalPanel}>
        <Tabs defaultActiveKey="1" onChange={this.switchTabs}>
          <TabPane tab="配置管理列表" key="1">
            {/* 筛选框 */}
            <div className={styles.selects}>
              <div>
                <Select
                  value={productStatus}
                  onChange={(e) => {
                    this.setState({ productStatus: e });
                  }}
                  style={{ width: 174, marginRight: 16 }}
                >
                  <Select.Option value="">全部状态</Select.Option>
                  <Select.Option value="0">待审</Select.Option>
                  <Select.Option value="1">上架</Select.Option>
                  <Select.Option value="2">下架</Select.Option>
                  <Select.Option value="3">测试</Select.Option>
                  <Select.Option value="4">停售</Select.Option>
                </Select>
                <Input
                  style={{ width: 174, marginRight: 16 }}
                  placeholder="请输入商品名称"
                  suffix={<SearchOutlined />}
                  value={productName}
                  onChange={(e) => {
                    this.setState({ productName: e.target.value });
                  }}
                />
                <Input
                  style={{ width: 174, marginRight: 16 }}
                  placeholder="请输入商品ID"
                  type="number"
                  suffix={<SearchOutlined />}
                  value={productId}
                  onChange={(e) => {
                    this.setState({ productId: e.target.value });
                  }}
                />
                <Button onClick={this.handleSearch} type="primary">
                  搜索
                </Button>
                <Button onClick={this.handleRecovery} style={{ marginLeft: 16 }} type="ghost">
                  重置
                </Button>
              </div>
              <div>
                <Button
                  onClick={() => {
                    this.recycleBefore([99233], idListR.length);
                  }}
                  disabled={idListR.length < 1}
                  type="primary"
                >
                  {`移入回收站${idListR.length ? `(${idListR.length})` : ''}`}
                </Button>
                <Button style={{ marginLeft: 16 }} onClick={this.handleAddBut} type="primary">
                  + &nbsp;添加商品
                </Button>
              </div>
            </div>
            {/* 表格 */}
            <div className={styles.tableWarp}>
              <Table
                pagination={{
                  position: ['bottomCenter'],
                  total,
                  pageSize: 10,
                  current: pageIndex,
                  showSizeChanger: false,
                  onChange: this.browsePage,
                }}
                rowSelection={rowSelectionList}
                columns={columns}
                dataSource={renewalList}
              />
            </div>
          </TabPane>

          <TabPane tab="回收站" key="2">
            {/* 筛选框 */}
            <div className={styles.selects}>
              <div>
                <Select
                  value={productStatusR}
                  onChange={(e) => {
                    this.setState({ productStatusR: e });
                  }}
                  style={{ width: 174, marginRight: 16 }}
                >
                  <Select.Option value="">全部状态</Select.Option>
                  <Select.Option value="0">待审</Select.Option>
                  <Select.Option value="1">上架</Select.Option>
                  <Select.Option value="2">下架</Select.Option>
                  <Select.Option value="3">测试</Select.Option>
                  <Select.Option value="4">停售</Select.Option>
                </Select>

                <Input
                  style={{ width: 167, marginRight: 16 }}
                  placeholder="请输入商品名称"
                  suffix={<SearchOutlined />}
                  value={productNameR}
                  onChange={(e) => {
                    this.setState({ productNameR: e.target.value });
                  }}
                />
                <Input
                  style={{ width: 167, marginRight: 16 }}
                  placeholder="请输入商品ID"
                  type="number"
                  suffix={<SearchOutlined />}
                  value={productIdR}
                  onChange={(e) => {
                    this.setState({ productIdR: e.target.value });
                  }}
                />

                <Button onClick={this.handleSearchR} type="primary">
                  搜索
                </Button>
                <Button onClick={this.handleRecoveryR} style={{ marginLeft: 16 }} type="ghost">
                  重置
                </Button>
              </div>
              <Button disabled={selectedR.length < 1} onClick={this.reserveProduct} type="primary">
                {`恢复配置 ${selectedR.length ? selectedR.length : ''}`}
              </Button>
            </div>
            {/* 表格 */}
            <div className={styles.tableWarp}>
              <Table
                pagination={{
                  position: ['bottomCenter'],
                  total: totalRecycle,
                  pageSize: 10,
                  current: pageIndexRecycle,
                  showSizeChanger: false,
                  onChange: this.browsePageRecycle,
                }}
                rowSelection={{ ...rowSelection }}
                columns={columns}
                dataSource={renewalListRecycle}
              />
            </div>
          </TabPane>
        </Tabs>

        {/* 添加商品弹框 */}
        <Modal
          closable={true}
          footer={null}
          maskClosable={false}
          title="添加商品"
          width={900}
          visible={visibleProductModal}
          onCancel={this.closeModalProduct}
          centered={true}
        >
          <div className={styles.searchTools}>
            <Input
              style={{ width: 167, marginRight: 16 }}
              placeholder="请输入商品ID"
              type="number"
              suffix={<SearchOutlined />}
              value={productIdModal}
              onChange={(e) => {
                this.setState({ productIdModal: e.target.value });
              }}
            />

            <Input
              style={{ width: 167, marginRight: 16 }}
              placeholder="请输入商品名称"
              suffix={<SearchOutlined />}
              value={productNameModal}
              onChange={(e) => {
                this.setState({ productNameModal: e.target.value });
              }}
            />

            <Button type="primary" style={{ marginRight: 16 }} onClick={this.handleSearchInModal}>
              查询
            </Button>

            <Button
              disabled={selectModalList.length < 1}
              type="primary"
              onClick={this.addSomeProduct}
            >
              添加
            </Button>
          </div>
          <ProductListTableForModal
            dataSource={productModalList}
            type="add"
            handleProduct={this.handleProduct}
            onPageChange={this.onPageChange}
            pageSize={7}
            pageIndex={pageIndexModal}
            total={totalModal}
            haveSelection={true}
            changeSelection={this.changeSelectionModal}
          />
        </Modal>
      </div>
    );
  }
}

export default connect(({ renewal }: ConnectState) => ({
  renewalList: renewal.renewalList,
  pageIndex: renewal.pageIndex,
  total: renewal.total,
  productModalList: renewal.productModalList,
  pageIndexModal: renewal.pageIndexModal,
  totalModal: renewal.totalModal,
  renewalListRecycle: renewal.renewalListRecycle,
  totalRecycle: renewal.totalRecycle,
  pageIndexRecycle: renewal.pageIndexRecycle,
}))(RenewalPanel);
